<template>
  <div class="fu">
    <!-- 背景div -->
    <div class="bg">
      <!-- 第一层: 头像 手机号 成长值 会员码 -->
      <div class="row1">
        <!-- 第一列: 头像 手机号 成长值 -->
        <div class="col">
          <!-- 头像 -->
          <van-image
            @click="$router.push('/information')"
            class="headpic"
            round
            width="4.5rem"
            height="4.5rem"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
            fit="cover"
          />
          <!-- 显示的手机号 -->
          <van-button class="pho" type="primary" to="??" color="transparent"
            >135****1323</van-button
          >
          <!-- 成长值 -->
          <div class="group" @click="$router.push('/memberinfo')">成长值1</div>
        </div>
        <!-- 第二列: 会员码 -->
        <div class="col2">
          <span class="vipyard">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-erweima"></use>
            </svg>
            会员码
          </span>
        </div>
      </div>
      <!-- 第二层 -->
      <div>
        <!-- 成为会员,立即注册 -->
        <div class="tobevip">
          <span>
            <van-icon name="gem-o" color="#feb93e" size="0.875em" />
            成为会员, 享9.8折, 享包邮
          </span>
          <span>
            立即注册
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-xiangyoujiantou"></use>
            </svg>
          </span>
        </div>
      </div>
    </div>
    <!-- 内容部分 -->
    <div class="content">
      <!-- 积分  优惠  卡  余额  零钱 -->
      <div class="col1">
        <van-grid :border="false" :column-num="5">
          <van-grid-item text="积分" @click="$router.push('/points')">
            <span>0</span>
            <div>积分</div>
          </van-grid-item>
          <van-grid-item text="优惠券/码">
            <span>0</span>
            <div>优惠券/码</div>
          </van-grid-item>
          <van-grid-item text="卡">
            <span>0</span>
            <div>卡</div>
          </van-grid-item>
          <van-grid-item text="余额">
            <span>0.00</span>
            <div>余额</div>
          </van-grid-item>
          <van-grid-item text="零钱">
            <van-icon name="gold-coin-o" size="20" />
            <div>零钱</div>
          </van-grid-item>
        </van-grid>
      </div>
      <div class="col2col3">
        <!-- 订单 -->
        <div class="col2">
          <span class="order"> 我的订单 </span>
          <span class="lookorder" @click="$router.push('/myorder')">
            查看全部订单
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-xiangyoujiantou"></use>
            </svg>
          </span>
        </div>
        <!-- 待付款  待发货  待收货  待评价  退款/售后 -->
        <div class="col3">
          <van-grid :border="false" :column-num="5">
            <van-grid-item text="积分">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-daifukuan"></use>
              </svg>
              <div>待付款</div>
            </van-grid-item>
            <van-grid-item text="优惠券/码">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-daifahuo"></use>
              </svg>
              <div>待发货</div>
            </van-grid-item>
            <van-grid-item text="卡">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-daishouhuo"></use>
              </svg>
              <div>待收货</div>
            </van-grid-item>
            <van-grid-item text="余额">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-pingjia"></use>
              </svg>
              <div>待评价</div>
            </van-grid-item>
            <van-grid-item text="零钱">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-qian"></use>
              </svg>
              <div>退款/售后</div>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
      <div class="col4">
        <!-- 任务中心  收货地址 -->
        <div class="col4all">
          <div class="taskcenter">
            <span>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-renwuzhongxin"></use>
              </svg>
              任务中心
            </span>
            <span>
              <!-- ">" -->
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xiangyoujiantou"></use>
              </svg>
            </span>
          </div>
          <hr color="#f5f5f5" />
          <div class="reciving">
            <span>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-shouhuodizhi"></use>
              </svg>
              收货地址
            </span>
            <span>
              <!-- ">" -->
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xiangyoujiantou"></use>
              </svg>
            </span>
          </div>
        </div>
      </div>
    </div>

    <van-divider
      class="more"
      :style="{ color: '#333', borderColor: '#dcdee0', padding: '0 16px' }"
    >
      更多精选商品
    </van-divider>
  </div>
</template>

<script>
export default {
  data() {
    return {
      container: null,
    };
  },
  mounted() {
    this.container = this.$refs.container;
  },
};
</script>

<style lang="css" scoped>
.fu {
  background-color: #f8f8f8;
}
.bg {
  width: 100%;
  height: 25vh;
  background-image: url("@/assets/10001.png");
}
.bg .row1 {
  display: flex;
}
.bg .row1 .col {
  position: relative;
}
.bg .row1 .col .headpic {
  position: absolute;
  top: 2.5rem;
  left: 1.5rem;
}
.bg .row1 .col .pho {
  position: absolute;
  top: 2.5rem;
  left: 6rem;
  font-size: 1.25rem;
}
.bg .row1 .col .group {
  box-sizing: border-box;
  width: 3.9375rem;
  line-height: 20px;
  background-color: #3d3932;
  color: #e5c897;
  padding: 0.125rem;
  border-radius: 1.25rem;
  text-align: center;
  font-size: 0.75rem;
  position: absolute;
  top: 5rem;
  left: 7.5rem;
}
.bg .row1 .col2 .vipyard {
  position: absolute;
  top: 1rem;
  left: 18rem;
  color: #fff;
  background-color: #906c47;
  font-size: 0.75rem;
  padding: 0.1875rem 0.625rem;
  border-radius: 1.25rem;
}
.bg .row1 .col2 .vipyard .icon {
  width: 0.75rem;
  height: 0.75rem;
  fill: #fff;
}
.bg .tobevip {
  width: 96%;
  height: 5.5vh;
  background-color: #37322c;
  padding: 0.375rem 0.5rem;
  box-sizing: border-box;
  border-radius: 0.5rem 0.5rem 0 0;
  position: absolute;
  top: 19.5vh;
  left: 2%;
  font-size: 0.9375rem;
}
.bg .tobevip span:first-child {
  color: #c4ab7e;
  margin-right: 4.5rem;
}
.bg .tobevip span:last-child {
  color: #fff;
}
.bg .tobevip .icon {
  width: 0.75rem;
  height: 0.75rem;
  fill: #fff;
}
/* 积分  优惠  卡  余额  零钱 */
.content {
  background-color: #f8f8f8;
  width: 100%;
}
.content .col1 {
  padding: 0.625rem;
  font-size: 0.8125rem;
}
.content .col1 span {
  font-size: 1rem;
  font-weight: 600;
}
.content .col1 div {
  font-size: 0.75rem;
}
.content .col2col3 {
  background-color: #fff;
  margin: 0.625rem;
  padding: 0.4375rem;
}
.content .col2 {
  height: 2.5rem;
  text-align: center;
  line-height: 2.5rem;
}
.content .col2 .order {
  padding: 0.625rem;
  font-size: 0.875rem;
  font-weight: 600;
  margin-right: 4rem;
}
.content .col2 .lookorder {
  font-size: 0.8125rem;
  color: #999;
  margin-left: 6rem;
}
.content .col2 .lookorder .icon {
  width: 0.8125rem;
  height: 0.8125rem;
  fill: #999;
}
.content .col3 {
  font-size: 0.75rem;
}
.content .col3 .icon {
  width: 2rem;
  height: 2rem;
}
.content .col4 {
  background-color: #fff;
  margin: 0.625rem;
  padding: 0.625rem;
}
.content .col4 .taskcenter,
.content .col4 .reciving {
  height: 2rem;
  line-height: 2rem;
}
.content .col4 span:first-child .icon {
  width: 1rem;
  height: 1rem;
  fill: #999;
}
.content .col4 span:last-child .icon {
  width: 0.8125rem;
  height: 0.8125rem;
  fill: #999;
  margin-left: 14rem;
}
</style>
